<template>
  <div class="app-container">
    <el-dialog :title="pageTitle" :visible.sync="dialogFormVisible" :before-close="beforeClose" width="80%">
      <el-form :label-position="labelPosition">

        <el-form-item label="充值类型：" :label-width="formLabelWidth">
          <template>
            <el-select v-model="form.type" placeholder="充值类型">
              <el-option
                v-for="item in options"
                :key="item.valueRecharge"
                :label="item.labelRecharge"
                :value="item.valueRecharge"
              />
            </el-select>
          </template>
        </el-form-item>

        <el-form-item label="微信商户ID：" :label-width="formLabelWidth">
          <el-input v-model="form.merchantId" minlength="2" maxlength="10" placeholder="请输入微信商户ID(非必填,易宝支付不需要该配置)" />
        </el-form-item>

        <el-form-item label="微信支付秘钥：" :label-width="formLabelWidth">
          <el-input v-model="form.paySecret" placeholder="请输入微信支付秘钥(非必填,易宝支付不需要该配置)" />
        </el-form-item>

        <el-form-item label="*公众号ID：" :label-width="formLabelWidth">
          <el-input v-model="form.appId" placeholder="请输入支付ID" />
        </el-form-item>

        <el-form-item label="*公众号秘钥：" :label-width="formLabelWidth">
          <el-input v-model="form.appSecret" placeholder="请输入公众号秘钥" />
        </el-form-item>

        <el-form-item label="*易宝收单商编号：" :label-width="formLabelWidth">
          <el-input v-model="form.yopMerchantNo" minlength="2" maxlength="11" placeholder="请输入易宝收单商编号" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { iniPay, handle } from '@/api/pay'
export default {
  name: 'PayHandle',
  data() {
    return {
      labelPosition: 'right',
      formLabelWidth: '130px',
      pageTitle: '编辑支付配置',
      dialogFormVisible: false,
      id: '',
      title: '',
      options: [], // label 文字 / value 等级
      form: {
        type: '',
        merchantId: '',
        paySecret: '',
        appId: '',
        appSecret: '',
        yopMerchantNo: ''
      }
    }
  },

  methods: {
    beforeClose() {
      this.canel()
    },

    ini(id, title) {
      this.id = id
      this.title = title
      this.dialogFormVisible = true
      this.pageTitle = '编辑 [' + this.id + ':' + this.title + '] 店铺'
      var params = {}
      params.id = id

      this.iniPay(params)
    },

    // 初始化界面赋值
    iniPay(params) {
      iniPay(params).then(response => {
        this.form = response.data.data
        this.options = response.data.options
        console.log(this.form)
        console.log(this.options)
      })
    },

    canel() {
      this.dialogFormVisible = false
    },

    sure() {
      handle({ data: this.form, id: this.id }).then(res => {
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$emit('afterSave')
        this.canel()
      })
    }

  }
}
</script>
